import React, { useState } from "react";
import { useI18n } from "@/utils/in18";

// 子组件：我喜欢的对象-详情弹窗
// 功能：展示大图、统计信息（被赞数/被使用次数），并提供“移除喜欢”与“创建图片”操作
// - UI：Tailwind；适配 PC/移动端与明亮/暗黑主题
// - 交互：移除喜欢需要二次确认

export type LikedTemplateItem = {
  // 模板唯一 ID
  id: number;
  // 模板名称（可选，仅展示不强制）
  name?: string;
  // 角色提示词（用于跳转创建图片时携带）
  role_prompt?: string;
  // 图片 URL（用于展示大图）
  image_url: string;
  // 被赞数
  likes_count?: number;
  // 被使用次数
  uses_count?: number;
  // 是否已喜欢
  is_liked?: boolean;
};

type Props = {
  // 是否打开弹窗
  open: boolean;
  // 当前查看的模板
  item: LikedTemplateItem | null;
  // 关闭弹窗
  onClose: () => void;
  // 确认移除喜欢
  onConfirmUnlike: (templateId: number) => Promise<void>;
  // 跳转创建图片
  onCreateImage: (item: LikedTemplateItem) => void;
};

const LikedTemplateModal: React.FC<Props> = ({ open, item, onClose, onConfirmUnlike, onCreateImage }) => {
  // 二次确认弹窗状态
  const [confirmOpen, setConfirmOpen] = useState<boolean>(false);
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
  const { t } = useI18n();

  if (!open || !item) return null;

  return (
    <div className="fixed inset-0 z-[11000] flex items-center justify-center p-4">
      {/* 背景遮罩 */}
      <div className="absolute inset-0 bg-black/60" onClick={onClose} />

      {/* 内容卡片 */}
      <div className="relative z-10 w-full max-w-4xl max-h-[90vh] overflow-auto rounded-2xl bg-white dark:bg-[#0b0b0b] text-gray-900 dark:text-gray-100 shadow-2xl border border-gray-200 dark:border-gray-700">
        {/* 头部 */}
        <div className="flex items-center justify-between px-4 sm:px-6 py-3 border-b border-gray-200 dark:border-gray-700">
          <div className="font-semibold">{t('my_liked_persion.title')}</div>
          <button onClick={onClose} className="px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-[#111]/60">{t('my_liked_persion.close')}</button>
        </div>

        {/* 主体：左右布局，移动端上下布局 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-0 md:gap-4 max-h-[calc(90vh-56px)]">
          {/* 图片预览区 */}
          <div className="p-4 md:p-6 overflow-auto flex items-center justify-center bg-gray-50 dark:bg-[#0a0a0a]">
            <img
              src={item.image_url}
              alt={item.name || t('my_liked_persion.image_alt')}
              className="max-h-[60vh] md:max-h-[70vh] w-auto rounded-lg object-contain border border-gray-200 dark:border-gray-700"
            />
          </div>

          {/* 信息与操作区 */}
          <div className="p-4 md:p-6 overflow-auto">
            {/* 简要信息 */}
            <div className="text-base font-semibold truncate">{item.name || t('my_liked_persion.unnamed_template')}</div>
            {item.role_prompt ? (
              <div className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">{item.role_prompt}</div>
            ) : (
              <div className="mt-1 text-xs text-gray-400">{t('my_liked_persion.no_prompt')}</div>
            )}

            {/* 统计信息卡片 */}
            <div className="mt-4 grid grid-cols-2 gap-3 text-sm">
              <div className="flex flex-col p-3 rounded-lg bg-gray-50 dark:bg-[#0b0b0b] border border-gray-200 dark:border-gray-700">
                <div className="flex items-center gap-2">
                  {/* 点赞图标 */}
                  <svg className="w-4 h-4 text-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z" stroke="currentColor" strokeWidth="0.5" fill="currentColor" />
                  </svg>
                  <span className="text-gray-500 text-xs">{t('my_liked_persion.number_of_likes')}</span>
                </div>
                <span className="mt-1">{item.likes_count ?? 0}</span>
              </div>
              <div className="flex flex-col p-3 rounded-lg bg-gray-50 dark:bg-[#0b0b0b] border border-gray-200 dark:border-gray-700">
                <div className="flex items-center gap-2">
                  {/* 使用次数图标 */}
                  <svg className="w-4 h-4 text-gray-500" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3 5h18M3 12h18M3 19h18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                  <span className="text-gray-500 text-xs">{t('my_liked_persion.number_of_times_used')}</span>
                </div>
                <span className="mt-1">{item.uses_count ?? 0}</span>
              </div>
            </div>

            {/* 操作按钮 */}
            <div className="mt-4 flex flex-wrap gap-3">
              <button
                className="px-4 py-2 text-sm rounded-lg border border-red-200 text-red-600 hover:bg-red-50"
                onClick={() => setConfirmOpen(true)}
              >
                {t('my_liked_persion.remove_like')}
              </button>
              <button
                className="px-4 py-2 text-sm rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-[#111]"
                onClick={() => onCreateImage(item)}
              >
                {t('my_liked_persion.create_picture')}
              </button>
            </div>
          </div>
        </div>

        {/* 二次确认弹窗 */}
        {confirmOpen && (
          <div className="fixed inset-0 z-[12000] flex items-center justify-center p-4">
            <div className="absolute inset-0 bg-black/50" onClick={() => confirmLoading ? null : setConfirmOpen(false)} />
            <div className="relative z-10 w-full max-w-sm rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#0b0b0b] p-4 shadow-xl">
              <div className="text-base font-semibold text-gray-900 dark:text-gray-100">{t('my_liked_persion.confirm_title')}</div>
              <div className="mt-2 text-sm text-gray-600 dark:text-gray-300">{t('my_liked_persion.confirm_message')}</div>
              <div className="mt-4 flex justify-end gap-2">
                <button
                  className="px-3 py-1.5 text-sm rounded border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-[#111]"
                  onClick={() => setConfirmOpen(false)}
                  disabled={confirmLoading}
                >
                  {t('my_liked_persion.cancel')}
                </button>
                <button
                  className="px-3 py-1.5 text-sm rounded bg-red-600 text-white hover:opacity-90"
                  onClick={async () => {
                    try {
                      setConfirmLoading(true);
                      await onConfirmUnlike(item.id);
                      setConfirmOpen(false);
                    } finally {
                      setConfirmLoading(false);
                    }
                  }}
                  disabled={confirmLoading}
                >
                  {confirmLoading ? t('my_liked_persion.please_wait') : t('my_liked_persion.confirm')}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default LikedTemplateModal;


